<template>
    <div class="orderDetele">
        <Loading :loading="loading">
            <Form :label-width="150" :model="formOrderData" inline>
                <h3 class="title">订单信息</h3>
                <FormItem label="子订单号：" style="width:32%">
                    <div>{{ formOrderData.subOrderId }}</div>
                </FormItem>
                <FormItem label="主订单号：" style="width:32%">
                   <div>{{ formOrderData.orderId }}</div>
                </FormItem>
                <FormItem label="商品订单下单时间：" style="width:32%">
                    <div>{{ formOrderData.createdDt }}</div>
                </FormItem>
                <FormItem label="通道费率：" style="width:32%">
                    <div>{{ (formOrderData.rate || 0) + '%'}}</div>
                </FormItem>
                <FormItem label="支付订单：" style="width:32%">
                    <div>{{ formOrderData.paymentId }}</div>
                </FormItem>
                <FormItem label="支付流水：" style="width:32%">
                    <div>{{ formOrderData.order ? formOrderData.order.flowId : '' }}</div>
                </FormItem>
                <FormItem label="支付订单创建时间：" style="width:32%">
                    <div>{{ formOrderData.payCreateTime }}</div>
                </FormItem>
                <FormItem label="支付订单交易时间：" style="width:32%">
                    <div>{{ formOrderData.payTime }}</div>
                </FormItem>
                <FormItem label="商品名称：" style="width:32%">
                    <div>{{ formOrderData.productName }}</div>
                </FormItem>
                <FormItem label="产品编码：" style="width:32%">
                    <div>{{ formOrderData.productCode }}</div>
                </FormItem>
                <FormItem label="业务渠道来源：" style="width:32%">
                    <div>{{ formOrderData.orderSource }}</div>
                </FormItem>
                <FormItem label="支付渠道：" style="width:32%">
                    <div>{{ formOrderData.payChannel }}</div>
                </FormItem>
                <FormItem label="订单金额：" style="width:32%">
                   <div>{{ formOrderData.subOrderAmount | moneyNUm }}</div>
                </FormItem>
                <FormItem label="实付金额：" style="width:32%">
                    <div>{{ formOrderData.payAmount | moneyNUm }}</div>
                </FormItem>
                <FormItem label="是否优惠：" style="width:32%">
                    <div>{{ formOrderData.isCoupon ? '是' : '否' }}</div>
                </FormItem>
                <FormItem label="支付方式：" style="width:32%">
                    <div>{{ formOrderData.payWay }}</div>
                </FormItem>

                <div v-for="(i, ind) in formOrderData.coupons" :key="ind">
                    <FormItem :label="`优惠券${ind+1}:`" style="width:32%">
                        <div>{{ i.couponName }}</div>
                    </FormItem>
                    <FormItem label="优惠券编码：" style="width:32%">
                    <div>{{ i.couponCode }}</div>
                    </FormItem>
                    <FormItem label="优惠金额：" style="width:32%">
                        <div>{{ i.discount ? `${i.discount / 100}元` : '0' }}</div>
                    </FormItem>
                </div>
            </Form>

             <Form :label-width="150" :model="formMerchData" inline>
                <h3>商户信息</h3>
                <div class="childerList">
                    <FormItem label="商户名称" style="width:32%">
                        <div>{{ formMerchData.merchantName }}</div>
                    </FormItem>
                    <FormItem label="商户编码：" style="width:32%">
                        <div>{{ formMerchData.merchantCode	 }}</div>
                    </FormItem>
                    <FormItem label="组织机构：" style="width:32%">
                        <div>{{ formMerchData.organizationName }}</div>
                    </FormItem>
                    <FormItem label="机构编码：" style="width:32%">
                        <div>{{ formMerchData.organizationCode }}</div>
                    </FormItem>
                    <FormItem label="开户行：" style="width:32%">
                        <div>{{ formMerchData.openingBank }}</div>
                    </FormItem>
                    <FormItem label="账户结算类型：" style="width:32%">
                        <div>{{ formMerchData.accountTypeName }}</div>
                    </FormItem>
                    <FormItem label="银行账号：" style="width:32%">
                        <div>{{ formMerchData.accountNo }}</div>
                    </FormItem>
                    <FormItem label="合同有效期：" style="width:32%">
                        <div>{{ formMerchData.contractStartDate }} -- {{ formMerchData.contractStartDate }}</div>
                    </FormItem>
                </div>
             </Form>

            <Form :label-width="150" :model="formRuleData" inline>
                <h3>清分信息</h3>
                <div class="childerList">
                    <FormItem label="清分规则名称：" style="width:32%">
                        <div>{{ formRuleData.ruleName }}</div>
                    </FormItem>
                    <FormItem label="规则类型：" style="width:32%">
                        <div>{{ formRuleData.ruleTypeCn }}</div>
                    </FormItem>
                    <FormItem label="结算类型：" style="width:32%">
                       <div>{{ formRuleData.settlementTypeCn }}</div>
                    </FormItem>
                    <FormItem label="规则编码：" style="width:32%">
                        <div>{{ formRuleData.ruleCode }}</div>
                    </FormItem>
                    <FormItem label="产品单价：" style="width:32%">
                        <div>{{ formRuleData.productPrice | moneyNUms }}</div>
                    </FormItem>
                    <FormItem label="清分规则：" style="width:32%">
                        <div>{{formRuleData.clearingRuleCn}}</div>
                    </FormItem>
                    <FormItem label="平台应收：" style="width:32%">
                        <div>{{ formRuleData.clearingRule == 1 ? `${formRuleData.platformReceivable}%` : formRuleData.clearingRule == 2 ? `${formRuleData.platformReceivable}元` : '0.00' }}</div>
                    </FormItem>
                    <FormItem label="商户应收：" style="width:32%">
                        <div>{{ formRuleData.clearingRule == 1 ? `${formRuleData.merchantReceivable}%` : formRuleData.clearingRule == 2 ? `${formRuleData.merchantReceivable}元` : '0.00' }}</div>
                    </FormItem>
                    <FormItem label="规则优先级：" style="width:32%">
                        <div>{{ formRuleData.priorityLevel }}</div>
                    </FormItem>
                    <FormItem label="规则生效日期：" style="width:32%">
                        <div>{{ formRuleData.effectiveDate }}</div>
                    </FormItem>
                    <FormItem label="规则失效日期：" style="width:32%">
                        <div>{{ formRuleData.expireDate }}</div>
                    </FormItem>
                    <FormItem label="清分周期：" style="width:32%">
                        <div v-if="formRuleData.clearingCycleMode === '1'">T + {{ formRuleData.clearingCycleValue }}</div>
                        <div v-if="formRuleData.clearingCycleMode === '2'">{{ formRuleData.clearingCycleValue }}日/{{ formRuleData.clearingCycleValueExt }}个月</div>
                    </FormItem>
                    <FormItem label="订单核销日期：" style="width:32%">
                        <div>{{ formRuleData.verifiedTime }}</div>
                    </FormItem>
                    <FormItem label="应清算日期：" style="width:32%">
                        <div>{{ formRuleData.shouldClearDate }}</div>
                    </FormItem>
                </div>
            </Form>

                <h3 class="title">平台清分信息</h3>
                <Table border :columns="columnsBill" :data="formBillData"></Table>
                <br />
                <h3 class="title">银行清分流水</h3>
                <Table border :columns="columnsBack" :data="formBackData"></Table>
                <br />
                <h3>规则匹配</h3>
                <br />
                <Table border :columns="columnsRule" :data="ruleTableDataList" maxHeight="500">
                    <template slot-scope="{ row, index }" slot="action">
                        <!-- 拿到清分id 与规则id 匹配，则是当前生效，否则就显示匹配按钮 -->
                        <span v-if="row.ruleCode == ruleId">{{row.ruleCode != '' ? '当前生效' : ''}}</span>
                        <Button type="primary"  v-else @click="handlerMatch(row)" >匹配</Button
                        >
                    </template>
                </Table>
                <br />
            </Form>
            <Button type="primary" @click="goBack">返回</Button>
        </Loading>
    </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../Module/clearingAbnormalModule";
import {
    Input,
    Button,
    Select,
    Form,
    FormItem,
    Message,
    Option,
    Table
} from "view-design";
import Loading from "@/components/Loading";
import Authc from "@/components/Authc";
import util from '@/utils/util';

export default {
    name: "clearingAbnormalForm",
    components: {
        Table,
        Loading,
        Input,
        Button,
        Form,
        FormItem,
        Message,
        Select,
        Option,
        Authc
    },
    props: ["id"],
    data() {
        return {
            columnsBill: [
                {
                    title: "费用类型",
                    align: "center",
                    key: "costTypeCn",
                    minWidth: 100
                },
                {
                    title: "应清分日期",
                    align: "center",
                    key: "shouldClearDate",
                    minWidth: 180
                },
                {
                    title: "商户号",
                    align: "center",
                    key: "merchantCode",
                    minWidth: 220
                },
                {
                    title: "清分金额(元)",
                    align: "center",
                    key: "clearAmount",
                    minWidth: 120,
                    render: (h, params) => {
                        return h('span', util.toMoney(params.row.clearAmount / 100));
                    },
                },
                {
                    title: "付款账号",
                    align: "center",
                    key: "payAcct",
                    minWidth: 200
                },
                {
                    title: "付款账户名",
                    align: "center",
                    key: "payAcctName",
                    minWidth: 200
                },
                {
                    title: "收款账号",
                    align: "center",
                    key: "colAcct",
                    minWidth: 200
                },
                {
                    title: "收款账户名",
                    align: "center",
                    key: "colAcctName",
                    minWidth: 220
                },
                {
                    title: "状态",
                    align: "center",
                    key: "billStatusCn",
                    minWidth: 100
                }
            ], /** 平台清分流水 */
            formBillData: [], /** 平台清分流水 */
            columnsBack: [
                {
                    title: "清分批次号",
                    align: "center",
                    key: "clearBatchNo",
                    minWidth: 180
                },
                {
                    title: "招行订单号",
                    align: "center",
                    key: "bankOrderId",
                    minWidth: 240
                },
                {
                    title: "外部订单号",
                    align: "center",
                    key: "orderId",
                    minWidth: 180
                },
                {
                    title: "子订单号",
                    align: "center",
                    key: "subOrderId",
                    minWidth: 190
                },
                {
                    title: "商户号",
                    align: "center",
                    key: "subMchId",
                    minWidth: 180
                },
                {
                    title: "付款账户名",
                    align: "center",
                    key: "payAcctName",
                    minWidth: 210
                },
                {
                    title: "付款账号",
                    align: "center",
                    key: "payAcct",
                    minWidth: 180
                },
                {
                    title: "收款账户名",
                    align: "center",
                    key: "colAcctName",
                    minWidth: 210
                },
                {
                    title: "收款账号",
                    align: "center",
                    key: "colAcct",
                    minWidth: 180
                },
                {
                    title: "清分金额(元)",
                    align: "center",
                    key: "clearAmount",
                    render: (h, params) => {
                        return h('span', params.row.clearAmount / 100)
                    },
                    minWidth: 120
                },
                {
                    title: "核销时间",
                    align: "center",
                    key: "verifiedTime",
                    minWidth: 180
                },
                {
                    title: "状态",
                    align: "center",
                    key: "billStatusCn",
                    minWidth: 80
                }
            ],
            formBackData: [], /** 银行清分流水 */
            columnsRule: [
                {
                    title: "规则名称",
                    align: "center",
                    key: "ruleName",
                    minWidth: 150
                },
                {
                    title: "规则类型",
                    align: "center",
                    key: "ruleTypeCn",
                    minWidth: 100
                },
                {
                    title: "结算类型",
                    align: "center",
                    key: "settlementTypeCn",
                    minWidth: 100
                },
                {
                    title: "产品单价",
                    align: "center",
                    key: "productPrice",
                    minWidth: 100,
                    render: (h, params) => {
                        let item = params.row.productPrice / 100;
                        return h('span', util.toMoney(item));
                    },
                },
                {
                    title: "平台应收",
                    align: "center",
                    key: "platform_pre",
                    minWidth: 120,
                    render: (h, params) => {
                        return h('span', (params.row.platform_pre) + '%')
                    },
                },
                {
                    title: "商户应收",
                    align: "center",
                    key: "merchant_pre",
                    minWidth: 120,
                    render: (h, params) => {
                        return h('span', (params.row.merchant_pre) + '%')
                    }
                },
                {
                    title: "规则优先级",
                    align: "center",
                    key: "priorityLevel",
                    minWidth: 100
                },
                {
                    title: "规则生效日期",
                    align: "center",
                    key: "effectiveDate",
                    minWidth: 120
                },
                {
                    title: "规则失效日期",
                    align: "center",
                    key: "expireDate",
                    minWidth: 120
                },
                {
                    title: "状态",
                    align: "center",
                    key: "settlementStatusCn",
                    minWidth: 100
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    slot: "action",
                    minWidth: 100
                }
            ],
            ruleTableDataList: [], /** 规则列表list */
            formOrderData: {}, // 订单信息
            formMerchData: {}, // 商户信息
            formRuleData: {}, // 清分信息

            ruleId: "" /** 清分信息id */
        };
    },
    created() {
        this.getDetails();
        this.getRuleList();
    },
    methods: {
        /** 清分规则列表list  -根据 productCode 查询 */
        async getRuleList() {
        try {
            let page = {
                currentPage: 1,
                pageSize: 9999,
                productCode: this.$route.query.code
            };
            let res = await this.$store.dispatch(`${namespace}/getRuleList`, { ...page });
            let data = res.data.data.list;
            this.ruleTableDataList = data;
        } catch (error) {
            this.$Message.error({
            content: error
            });
        }
        },
        /** 获取详情 */
        async getDetails() {
            try {
                let id = this.$route.query.id;
                let res = await this.$store.dispatch(`${namespace}/getDetail`, id);
                    let data = res.data;
                    this.formOrderData = data.orderRes || {};
                    this.formMerchData = data.merchantRes || {};
                    this.formRuleData = data.settlementRuleRes || {};
                    this.formBackData = data.bankBillRes || [];
                    this.formBillData = data.platformBillRes || [];
                    this.ruleId = (data.settlementRuleRes && data.settlementRuleRes.ruleCode) || '';
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        },
        /** 处理比配 **/
        async handlerMatch(data) {
           try {
                let id = this.$route.query.id;
                let obj = {
                    ruleCode: data.ruleCode,
                    subOrderIds: [id]
                };
                let res = await this.$store.dispatch(`${namespace}/postMatchingRule`, obj)
                if (res.ret === 0) {

                    this.$Message.success({
                       content: '操作成功'
                   });
                } else {
                    this.$Message.warning({
                        content: res.data.msg
                    })
                }
                setTimeout(()=>{
                    this.$router.push({
                        path: '/settlement/admin/SettlementCenter/clearingAbnormal'
                    });
                }, 1000)
           } catch (error) {
                this.$Message.error({
                    content: error
                });
           }
        },
        goBack() {
            this.$router.go(-1);
        }
    },
    computed: {
        loading: function() {
            let result = this.$store.state[namespace].loading;
            return result;
        }
    },
    filters: {
        moneyNUm (num) {
            if (num == 0 || !num) {
                return '0.00';
            } else {
                num = parseFloat(num / 100);
                num = num.toFixed(2);
                num = num.toLocaleString();
                if (num.indexOf('.') < 0) {
                num = num + '.00';
                }
                return num;
            }
        },
        moneyNUms(num) {
            if (num == 0 || !num) {
                return '0.00';
            } else {
                num = parseFloat(num);
                num = num.toFixed(2);
                num = num.toLocaleString();
                if (num.indexOf('.') < 0) {
                    num = num + '.00';
                }
                if (num.indexOf('.') )
                return num;
            }
        }
    }
};
</script>
<style lang="less">
.orderDetele {
    .title {
        border-bottom: 1px solid #999;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    .orderList {
        color: blue;
        cursor: pointer;
    }
    .childerList {
        border-top: 1px solid #999;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-top: 10px;
    }
    .ivu-btn-primary {
        margin-bottom: 0px;
    }
    .ivu-form-item {
        margin-bottom: 10px;
    }
    .textColorGray,
    .textColorGray .ivu-form-item-label {
        color: #a3a3a3;
    }
}
</style>
